<script src="../../webpack.config.js"></script>
<template>
    <div class="home-add">
        <div class="ps-search-header">
            <div class="ps-left">
                <i class="ion-ios-search"></i>
                <input type="text" placeholder="搜索关键词、产品ID" v-model="searchword">
            </div>
            <div class="ps-right" @click="cancel()">取消</div>
        </div>
        <div class="ps-searchword" v-if="!listShow" v-show="!loadingShow">
            <div class="ps-tishi">热门搜索</div>
            <div class="ps-col">
                <span v-for="l in listsearch" @click="searchClick($event)">{{l}}</span>
            </div>
        </div>
        <loading v-if="loadingShow"></loading>
        <div class="ps-list" v-if="listShow">
            <div class="ps-list-detail0" v-if="detail0Show">
                <div class="ps-list-title">{{city_name}}</div>
                <router-link :to="'/searchcity/'+cityId">
                    <span class="ps-list-note">
                       目的地  <i class="ion-chevron-right"></i>
                    </span>
                </router-link>
            </div>
            <div class="ps-list-detail" v-for="l in ps_list_detail">
                <div class="ps-list-title" >{{l.product_name}}</div>
                <router-link :to="'/detaillist/'+l.product_id">
                    <span class="ps-list-note">
                        详情 <i class="ion-chevron-right"></i>
                    </span>
                </router-link>
            </div>
            <router-link :to="'/searchword/'+word">
                <div class="ps-searchmore">查看全部{{product_num}}个产品</div>
            </router-link>
        </div>
        <div class="ps-list-null" v-if="listHidden">未找到包含“{{searchword}}”相关的产品</div>
    </div>
</template>

<script>
    import Loading from './loading.vue'
    export default{
        data(){
          return {
              loadingShow:false,
              detail0Show:false,
              listShow:false,
              listHidden:false,
              city_name:'',
              ps_list_detail:[],
              searchword:'',
              product_num:'',
              word:'',
              cityId:''
          }
        },
        props:['listsearch'],
        components:{
            Loading
        },
        methods:{
            cancel(){
                this.city_name=''
                this.ps_list_detail=''
                this.detail0Show=false
                this.listShow=false
                this.searchword=''
                $('.ps-search-header input').val('')
                $('.ps-searchword').css('display','block')
                $('.tabbar.visible').css('opacity','1')
                $('.home-add').stop().animate({'margin-top':'200%','position':'absolute'},250)
                $('.home-home').css('display','block')
                setTimeout(function(){
                    $('.home-add').css('display','none')
                },250)
            },
            searchClick(ev){
                var text=ev.target.innerText
                this.searchword=text
                this.loadingShow=true
            },
        },
        watch:{
            searchword(nv){
                console.log(nv)
//                this.listHidden=false
                if(nv){
                    this.listShow=false
                    this.loadingShow=true
                    this.axios.get('https://app.toursforfun.com/search/entry?word='+this.searchword)
                        .then(data=>{
                            this.loadingShow=false
                            this.listShow=true
                            var message=data.data.data
                            console.log(message.search_data.product_list)
                            if(!message.search_data.city && message.search_data.product_list.length){
                                this.detail0Show=false
                                this.ps_list_detail=message.search_data.product_list
                                this.word=message.search_data.city.word
                                console.log(this.word)
                            }else if(!message.search_data.city && !message.search_data.product_list.length){
                                this.listHidden=true
                                this.detail0Show=false
                                this.ps_list_detail=message.search_data.product_list
                            } else{
                                this.detail0Show=true
                                this.listHidden=false
                                this.city_name=message.search_data.city.city_name
                                this.ps_list_detail=message.search_data.product_list
                                this.product_num=message.search_data.product_num
                                this.word=message.search_data.city.word
                                this.cityId=message.search_data.city.city_id
                                console.log(this.cityId)
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }else{
                    this.loadingShow=false
                    this.listShow=false
                    this.listHidden=false
                }
            }
        }
    }
</script>
<style>
    .home-add{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin-top:200%;
        background-color: #fff;
        display: none;
        z-index: 99;
    }
    .ps-search-header{
        position: fixed;
        width:100%;
        height:44px;
        background: #fff;
        border-bottom:1px solid #ccc;
        padding:6px 10.67px;
    }
    .ps-search-header>div.ps-left{
        width:85%;
        display: inline-block;
        height:32px;
        border:1px solid #ccc;
        background: #eee;
        padding-left: 10px;
        border-radius: 20px;
    }
    .ps-search-header>div.ps-right{
        display: inline-block;
        line-height: 35px;
        color: #b2b2b2;
        font-weight: 300;
        font-size: 17px;
        float: right;
    }
    .ps-search-header>div.ps-right i{
        color: #999;
    }
    .ps-search-header input{
        display: inline-block;
        outline:none;
        border:none;
        height:30px;
        line-height: 30px;
        margin-left:10px;
        background: #eee;
        font-size:14px;
    }
    .ps-searchword{
        margin-top:44px;
        padding: 0 6px;
    }
    .ps-searchword .ps-tishi{
        width:100%;
        height:46px;
        line-height: 46px;
        padding:5px;
    }
    .ps-searchword .ps-col{
        width:100%;
        padding:5px;
        color: #363636;
    }
    .ps-searchword .ps-col span{
        display: inline-block;
        border-radius: 20px;
        margin: 10px 10px 0 0;
        float: left;
        color: #0090F0;
        padding: 5px 10px;
        border: 1px solid #0090F0;
    }
    .ps-list{
        padding:10px;
        margin-top:44px;
    }
    .ps-list-detail0,.ps-list-detail{
        border-bottom: 1px solid #ccc;
        padding:20px;
        overflow: hidden;
    }
    .ps-list-detail{
        margin-bottom: 20px;
    }
    .ps-list-title{
        width: 70%;
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size:16px;
    }
    .ps-list-note{
        float: right;
        color: #aaa;
        font-size: 14px;
    }
    .ps-list-null{
        margin-top:-10px;
        padding-left:10px;
    }
    .ps-searchmore{
        background-color: #fff;
        position: relative;
        z-index: 2;
        display: block;
        margin: -1px;
        padding: 16px;
        font-size: 14px;
        text-align: center;
        color: #0090F0;
    }
</style>